<script  lang="ts" setup name="Person">
  import {reactive,watch} from "vue";
  let person = reactive({
    name:'张三',
    age:18
  })
  function changName (){
    person.name += '~'
  }
  function changeAge (){
    person.age += 1
  }
  function changePerson (){
    Object.assign(person,{name: '李四',age: 19})
  }
  //  监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的
  watch(person,(value, oldValue) => {
    console.log('person变化了',value,oldValue)
  })
</script>

<template>
  <div class="prisonBox">
    <h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <button @click="changName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<style scoped>
    .prisonBox{
      background-color:skyblue;
      padding: 20px;
      box-shadow: 0 0 10px;
      font-size: 20px;
      border-radius: 20px;
      button{
        margin: 0px 10px;
      }
    }
</style>